<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 投诉管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-table :data="complaints" class="table" height="350">
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="bodyDesc" label="投诉内容" align="center"></el-table-column>
        <el-table-column prop="date" label="发布日期" align="center"></el-table-column>
        <el-table-column prop="address" label="住处" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <div>
              <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page"
                       :page-size="query.pageSize" :total="query.pageTotal"
                       @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "complaint",
  data() {
    return {
      complaints: [],
      query: {
        page: 1,
        pageSize: 5,
        pageTotal: 0
      }
    }
  },
  methods: {
    getComplaintList() {
      this.$axios.get("/complaints", {params: this.query}).then(res => {
        if (res.data.code == 200) {
          this.complaints = res.data.obj.records;
          this.query.pageTotal = res.data.obj.total;
          this.complaints.map(item => {
            item.bodyDesc = item.body.slice(0, 8) + "..."
          })
        }
      })
    },
    handleDetail(idx, row) {
      this.$router.push('/complaint-desc' + row.id);
    },
    handlePageChange(val) {
      this.query.page = val;
      this.getComplaintList();
    }
  },
  created() {
    this.getComplaintList();
  }
}
</script>

<style scoped>

</style>